<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-28 15:20:57
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-11 20:37:30
 * @FilePath: /meeting-minutes-h5/src/components/ConferenceMinutes/EditParticipantInfo/internalFormView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col justify-between h-full px-2">
    <div class="flex flex-row justify-between items-center px-2 h-[50px]">
      <div></div>
      <h2 class="font-bold text-[16px]">
        {{ isEditModel ? "编辑内部参会人" : "添加内部参会人" }}
      </h2>
      <div></div>
    </div>
    <div class="flex flex-col justify-between flex-auto pb-6">
      <div>
        <div v-for="field in combinedFields" :key="field.id" class="mb-4">
          <template v-if="field.fieldType === 'String'">
            <van-field
              v-model="internalInfo[field.fieldName]"
              :label="field.fieldName"
              :placeholder="field.placeholder || '请输入'"
              :required="field.isRequired === 1"
              :maxlength="field.maxLength"
              :minlength="field.minLength"
              clearable
            />
          </template>
          <template v-else-if="field.fieldType === 'Select'">
            <van-field
              v-model="internalInfo[field.fieldName]"
              :label="field.fieldName"
              :placeholder="field.placeholder || '请选择'"
              :required="field.isRequired === 1"
              is-link
              readonly
              @click="showSelect(field)"
            />
          </template>
        </div>
      </div>

      <!--  -->
      <van-button
        round
        block
        :disabled="!allRequiredFieldsFilled"
        @click="onClickConfirm"
        type="primary"
        class="button mt-6"
      >
        {{ isEditModel ? "更新" : "添加" }}
      </van-button>
    </div>

    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
  </div>
</template>

<script>
import { mapActions, mapState } from "pinia";
import { useMinutesStore } from "@/store";
import { updateInternalAttendAPI } from "@/services/minutes/lateAttender";
import { showLoadingToast, closeToast } from "vant";
export default {
  name: "InternalFormView",
  data() {
    return {
      internalInfo: {},
      actions: [],
      show: false,
      currentField: {},
    };
  },

  props: {
    isEditModel: {
      type: Boolean,
      default: false,
    },
    personInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  emits: ["confirm", "updateSuccess"],
  mounted() {
    this.initFormData();
  },
  methods: {
    ...mapActions(useMinutesStore, {
      getInternalFiledPartnerAction: "getInternalFiledPartnerAction",
    }),

    async initFormData() {
      const res = await this.getInternalFiledPartnerAction();
      if (!this.isEditModel) return;
      this.internalInfo["姓名"] = this.personInfo.name;
      const { fieldValues } = this.personInfo.formData;
      for (const fieldInfo of fieldValues) {
        const { fieldName, fieldValue } = fieldInfo;
        this.internalInfo[fieldName] = fieldValue || "";
      }
    },

    showSelect(field) {
      this.currentField = field;
      const options = JSON.parse(field.fieldOptions);
      this.actions = options.map((field) => {
        return {
          name: field,
        };
      });
      this.show = true;
    },

    onSelect(action) {
      this.internalInfo[this.currentField.fieldName] = action.name;
      console.log(action);
    },

    onClickConfirm() {
      if (this.isEditModel) {
        this.onUpdate();
      } else {
        this.onAdd();
      }
    },

    onAdd() {
      const parameter = {};
      const fieldValues = [];
      this.internalFiledTemple.forEach((field) => {
        fieldValues.push({
          id: field.id,
          fieldId: field.id,
          fieldName: field.fieldName,
          fieldValue: this.internalInfo[field.fieldName],
        });
      });
      parameter.name = this.internalInfo.姓名;
      parameter.ui = this.ui;
      parameter.fieldValues = fieldValues;
      this.$emit("confirm", parameter);
    },

    async onUpdate() {
      const parameter = {};
      const fieldValues = [];
      this.internalFiledTemple.forEach((field) => {
        fieldValues.push({
          id: field.id,
          fieldId: field.id,
          fieldName: field.fieldName,
          fieldValue: this.internalInfo[field.fieldName],
        });
      });
      parameter.name = this.internalInfo.姓名;
      parameter.fieldValues = fieldValues;
      showLoadingToast({ duration: 0 });
      await updateInternalAttendAPI(this.personInfo.partnerId, parameter);
      closeToast();
      this.$emit("updateSuccess", parameter);
    },
  },

  computed: {
    ...mapState(useMinutesStore, {
      internalFiledTemple: "internalFiledTemple",
    }),

    allRequiredFieldsFilled() {
      return this.combinedFields.every((field) => {
        return field.isRequired !== 1 || this.internalInfo[field.fieldName];
      });
    },

    combinedFields() {
      const nameField = {
        id: "name",
        fieldName: "姓名",
        fieldType: "String",
        placeholder: "请输入姓名",
        isRequired: 1,
        maxLength: 15,
        minLength: 1,
      };
      return [nameField, ...this.internalFiledTemple];
    },
  },
};
</script>

<style lang="less" scoped></style>
